<template>
  <div ref="echartsContainer" style="width: 100%; height: 300px;"></div>
  <p style="display: flex;justify-content: center; ">剩余调用次数</p>
  <hr>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
import axios from '../config/axios.ts'

const echartsContainer = ref(null);
const myChart = ref(null)
const interfaceData = ref()
const currentUser = ref()

const option = ref({
    // 在这里配置你的 ECharts 选项
    xAxis: {
      type: 'category',
  
      data: ['获得', 'Tue', 'Wed', 'Thu', ]
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      data: [80, 90, 100, 80, ],
      type: 'bar'
    }]
});
onMounted(() => {
  initECharts()
  drawBar()
  getCurrentUser()
})

const interfaces = ref();

const initECharts = ()=>{
  myChart.value = echarts.init(echartsContainer.value);
  myChart.value.setOption(option.value);
}

const getCurrentUser = async()=>{
  await axios.get('/user/get/login').then((res)=>{
    currentUser.value = res.data.data
  })
}


const drawBar = async()=>{
  const res = await axios.get('/interfaceInfo/list')
  interfaceData.value = res.data.data
  const XOption= [];
  //修改柱状图的x轴
  for(let i= 0;i<interfaceData.value.length;i++){
    XOption.push(interfaceData.value[i].ifname)
  }
  option.value.xAxis.data = XOption
 
  const result = await axios.get("/userInterface/list")
  const len = interfaceData.value.length
  const newSeries = []
  //修改柱状图的y轴
  for(var i=0;i<len;i++){
    interfaceData.value[i].leftNum = result.data.data[currentUser.value.id*len-len+i].leftNum
    newSeries.push(result.data.data[currentUser.value.id*len-len+i].leftNum)
  }
  option.value.series[0].data = newSeries

  //刷新柱状图的option
  myChart.value.setOption(option.value);
}
</script>
